<template>
	<view class="variety-card flex animated fadeIn faster">
		<image class="variety-card-cover rounded-lg" src="/static/demo/list2/4.jpg" mode="aspectFill"></image>
		<view class="variety-card-info flex flex-column flex-1 ml-3">
			<view class="variety-card-title">内容优化的卡片命名方案结合中文语境和娱乐行业特点</view>
			<text class="variety-card-date text-muted font">今天10:20</text>
			<view class="flex align-center justify-between text-muted">
				<view class="flex align-center justify-center">
					<text class="iconfont iconbofangshu"></text>
					<text class="ml-1">206.3万</text>
				</view>
				<view class="flex align-center justify-center iconfont icondanmushu font-md" hover-class="bg-light">
				</view>
				<view class="flex align-center justify-center iconfont icongengduo font-md" hover-class="bg-light">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "variety-card"
	}
</script>

<style lang="scss">
	.variety-card {
		padding: 15rpx;
		.variety-card-cover {
			width: 260rpx;
			height: 156rpx;
		}
		.variety-card-info {
			max-width: 400rpx;
		}
		.variety-card-title,
		.variety-card-date {
			line-height: 1.5 !important;
		}
	}
</style>